Example 7 - Custom controls

This examples shows how to use a custom controls component inside a specific View

Reference: Example 7 - Custom controls

Key Features

UI

• Viewport: Define multiple viewports on top of a single Viewer canvas.

Types

• ViewerControlsComponent: Custom interface to register external controls with the Viewer context.

Code Example

Below is an example implementation of custom controls using the ViewerControlsComponent interface:

import { Stack } from "@mui/system";
import { OrbitControls } from "@react-three/drei";
import { useEffect, useState } from "react";

import { MultipleSTL } from "../../data/scans";
import type {
  ViewerControls,
  ViewerControlsComponent,
} from "../../types/ViewerControls";
import { Viewport } from "../../ui/Viewport";
import { Viewer } from "../../Viewer";
import { PerspectiveView } from "../../views/PerspectiveView";

const CustomOrbitControls: ViewerControlsComponent = ({ onCreate }) => {
  const [controls, setControls] = useState<ViewerControls | null>(null);

  useEffect(() => {
    if (controls) {
      onCreate(controls);
    }
  }, [controls, onCreate]);

  return <OrbitControls ref={setControls} />;
};

function App() {
  return (
    <Viewer
      sx={{
        background: "transparent",
        position: "absolute",
        inset: 0,
        zIndex: 0,
      }}
      objects={MultipleSTL}
    >
      <Stack sx={{ width: "100%", height: "100%", flexDirection: "row" }}>
        <Viewport
          name="arcball"
          props={{ controls: "arcball" }}
          component={PerspectiveView}
        />
        <Viewport
          name="orbit"
          props={{ controls: "orbit" }}
          component={PerspectiveView}
        />
        <Viewport
          name="custom"
          props={{ controls: CustomOrbitControls }}
          component={PerspectiveView}
        />
      </Stack>
    </Viewer>
  );
}

export default App;

This example demonstrates how to integrate a custom OrbitControls component into a Viewer with multiple viewports. Each viewport can have its own control type, including the custom one.